<template>
  <div>
    <div class="back">
      <i class="iconfont icon-zuojiantou" @click="back()"></i>
      <div class="hide" v-show="showheader">
        <i class="iconfont icon-zuojiantou" @click="back()"></i>
        <div class="infoname">{{ info.name }}</div>
      </div>
    </div>

    <div class="headinfo">{{ info.name }}</div>

    <div class="top">
      <span v-for="item in people" :key="item.name">{{ item.name }}</span>
      <i class="iconfont icon-youjiantou"></i>
    </div>
    <div class="bottom">
      <i class="iconfont icon-weizhi"></i>
      <div class="address">
        {{ info.address }}
      </div>
      <i class="iconfont icon-dianhua"></i>
    </div>
    <div class="lunbo">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="v in film"
            :key="v.filmId"
            @mouseup="
              tab(
                v.name,
                v.grade,
                v.category,
                v.runtime,
                v.director,
                v.actors,
                v.filmId
              )
            "
          >
            <img :src="v.poster" alt="" width="90" height="120" />
          </div>
        </div>
      </div>
      <div class="sanjiao"></div>
    </div>
    <div class="cinemainfo">
      <div
        class="top"
        v-for="(h, index) in film"
        :key="h.index"
        :class="set[index]"
      >
        {{ name }}
        <span class="cinemascore">{{ grade }}</span>
      </div>
      <div
        class="bottom"
        v-for="(h, index) in film"
        :key="h.index"
        :class="set[index]"
      >
        {{ category }}
        |
        <span class="cinemascore">{{ runtime }}分钟</span>
        |
        <span>{{ director }}</span>
        |
        <span v-for="v in film" :key="v.role">{{ actors | actors }}</span>
      </div>
    </div>
    <van-tabs
      line-width="80"
      color="#ff5f16"
      title-active-color="#ff5f16"
      title-inactive-color="#191a1b"
    >
      <van-tab :title="title | formatDate">
        <div v-for="v in schedules" :key="v.scheduleId" class="time">
          <div class="schedules">{{ v.showAt | showAt }}</div>
          <div class="schedules">
            {{ v.filmLanguage }} <span>{{ v.imagery }}</span>
          </div>
          <div style="color: #ff5f16" class="schedules">
            ￥{{ v.salePrice / 100 }}
          </div>
          <div class="sell schedules">
            <span>购票</span>
          </div>
          <div class="endAt">{{ v.endAt | endAt }}</div>
          <div class="ting">{{ v.hallName }}</div>
        </div>
      </van-tab>
      <van-tab :title="title | formatDate1">
        <div v-for="v in schedules" :key="v.scheduleId" class="time">
          <div class="schedules">{{ v.showAt | showAt }}</div>
          <div class="schedules">
            {{ v.filmLanguage }} <span>{{ v.imagery }}</span>
          </div>
          <div style="color: #ff5f16" class="schedules">
            ￥{{ v.salePrice / 100 }}
          </div>
          <div class="sell schedules">
            <span>购票</span>
          </div>
          <div class="endAt">{{ v.endAt | endAt }}</div>
          <div class="ting">{{ v.hallName }}</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import api from '@/api/index.js'
import 'swiper/swiper.min.css'
import Swiper from 'swiper'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
export default {
  data() {
    return {
      info: {},
      people: {},
      film: [],
      name: '扬名立万',
      grade: '7.1',
      category: '悬疑|剧情',
      runtime: '123分钟',
      director: '刘循子墨',
      title: Date.now(),
      schedules: [],
      actors: [
        {
          name: '刘循子墨',
          role: '导演'
        }
      ],
      showheader: false,
      set: [
        'ss1',
        'ss2',
        'ss3',
        'ss4',
        'ss5',
        'ss6',
        'ss7',
        'ss8',
        'ss9',
        'ss10',
        'ss11',
        'ss12',
        'ss13',
        'ss14'
      ]
    }
  },
  filters: {
    actors: function (val) {
      if (val) {
        const arr = val.map((item) => item.name)
        return arr.join(' ')
      } else {
        return '暂无主演'
      }
    },
    formatDate: function (val) {
      var date = new Date(val)
      var month = date.getMonth() + 1
      var day = date.getDate()
      return '今天' + month + '月' + day + '日'
    },
    formatDate1: function (val) {
      var date = new Date(val)
      var month = date.getMonth() + 1
      var day = date.getDate() + 1
      return '明天' + month + '月' + day + '日'
    },
    showAt: function (val) {
      var date = new Date(val * 1000)
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return hour + ':' + minutes
    },
    endAt: function (val) {
      var date = new Date(val * 1000)
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return hour + ':' + minutes + '散场'
    }
  },
  created() {
    const id = this.$route.query.id
    this.$http.get(api.getCinemaInfo + '?cinemaId=' + id).then((res) => {
      // console.log(res)
      this.info = res.data.cinema
      this.people = res.data.cinema.services
    })
    this.$http.get(api.getCinemaArrg + '?cinemaId=' + id).then((res) => {
      // console.log(res)
      this.film = res.data.films
      // this.film.forEach((item) => {
      //   this.filmid.push(item.filmId)
      // })
      // console.log(res.data.films.actors)
      // console.log(this.film)
    })
    this.$http
      .get(
        api.getCinemaSch +
          '?cinemaId=' +
          this.$route.query.id +
          '&' +
          'filmId=' +
          id
      )
      .then((res) => {
        console.log(res)
        this.schedules = res.data.schedules
      })
  },
  mounted() {
    window.addEventListener('scroll', () => {
      const t = document.documentElement.scrollTop || document.body.scrollTop
      if (t >= 50) {
        this.showheader = true
      } else {
        this.showheader = false
      }
    })
    /* eslint-disable no-new */
    new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true
    })
  },
  methods: {
    back() {
      this.$router.push('/cinema')
    },
    tab(name, grade, category, runtime, director, actors, id) {
      this.name = name
      this.grade = grade
      this.category = category
      this.runtime = runtime
      this.director = director
      this.actors = actors
      // this.id = id
      this.$http
        .get(
          api.getCinemaSch +
            '?cinemaId=' +
            this.$route.query.id +
            '&' +
            'filmId=' +
            id
        )
        .then((res) => {
          console.log(res)
          this.schedules = res.data.schedules
        })
    }
    // onClick(name, title) {}
  }
}
</script>
<style lang="scss" scoped>
.back {
  width: 100%;
  height: 44px;
  line-height: 44px;
  // padding-left: 15px;
  // z-index: 303;
  .hide {
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    width: 100%;
    height: 44px;
    display: flex;
    .infoname {
      margin: 0 auto;
    }
  }
  span {
    // text-align: center;
    // position: relative;
    // top: -3px;
    // left: 34px;
    font-size: 17px;
  }
  i {
    font-size: 25px;
  }
}
.jiantou {
  font-size: 25px;
  padding-left: 15px;
}
.headinfo {
  // height: 44px;
  text-align: center;
  height: 35px;
}
// .center {
//   height: 400px;
//   // background-color: #f00;
// }
.top {
  width: 100%;
  // display: flex;
  text-align: center;
  span {
    // margin: 0 auto;
    position: relative;
    padding: 1px 6px;
    margin: 0 3px;
    font-size: 10px;
    border: 1px solid #ffb232;
    color: #ffb232;
  }
  i {
    color: #ffb232;
    position: relative;
    top: 3px;
  }
}
.bottom {
  font-size: 14px;
  height: 20px;
  padding: 0 12px;
  color: #191a1b;
  display: flex;
  margin: 30px 0;
  .address {
    width: 90%;
    // background-color: #f00;
    overflow: hidden;
    // -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 5px;
    // font-size: 14px;
  }
  i {
    font-size: 20px;
  }
  i:nth-child(1) {
    color: #b9bbbd;
    font-size: 25px;
    position: relative;
    top: -2px;
  }
  i:nth-child(3) {
    color: #000;
    position: relative;
    top: -1px;
  }
}
.lunbo {
  height: 160px;
  background-color: #abcdef;
  overflow: hidden;
  position: relative;
  .sanjiao {
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-bottom: 11px solid #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9999;
  }
  .swiper-container {
    width: 100%;
    // height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */

    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    margin-top: 15px;
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
  }
}
.cinemainfo {
  width: 100%;
  background: #fff;
  height: 80px;
  // padding: 15px 0;
  position: relative;
  .top {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    margin-top: 0px;
    text-align: center;
    margin-top: 10px;
    .cinemascore {
      font-size: 16px;
      font-style: italic;
      color: #ffb232;
      border: 0;
    }
  }
  .bottom {
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    text-align: center;
    margin-top: -5px;
    overflow: hidden;
    // -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.time {
  // height: 74px;
  line-height: 30px;
  padding: 0 15px;
  position: relative;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #ededed;
  div {
    width: 25%;
  }
  .schedules {
    position: relative;
    top: 10px;
    left: 14px;
  }
  .endAt {
    font-size: 13px;
    color: #797d82;
    position: relative;
    left: 14px;
  }
  .ting {
    font-size: 13px;
    color: #797d82;
    position: relative;
    left: -130px;
  }
  .sell {
    span {
      border-radius: 2px;
      position: relative;
      text-align: center;
      // margin-top: 18px;
      color: #ff5f16;
      border: 1px solid #ff5f16;
      padding: 5px 10px;
      font-size: 12px;
    }
  }
}
.ss1 {
  display: block;
}
.ss2 {
  display: none;
}
.ss3 {
  display: none;
}
.ss4 {
  display: none;
}
.ss5 {
  display: none;
}
.ss6 {
  display: none;
}
.ss7 {
  display: none;
}
.ss8 {
  display: none;
}
.ss9 {
  display: none;
}
.ss10 {
  display: none;
}
.ss11 {
  display: none;
}
.ss12 {
  display: none;
}
.ss13 {
  display: none;
}
.ss14 {
  display: none;
}
</style>